<template>
  <h2>ref页面</h2>
  <h2 @click="fn">数字：{{ x }}</h2>
  <h2>一、ref绑定响应式数据</h2>
  <h3>1.ref绑定基本数据类型</h3>
  <h3>{{ num }}</h3>
  <button @click="fn2">点击修改</button>

  <h3>2.ref绑定复杂数据类型</h3>
  <h3>{{ obj }}</h3>
  <button @click="fn3">点击修改</button>

  <h2>二、ref用于DOM绑定</h2>
  <input type="text" value="345" ref="inputRef" />
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
// 注意:vue3中声明的普通变量是不能做到响应式的
let x: number = 10;
function fn() {
  x++;
  console.log(x);
}

// 1.ref绑定基本数据类型
let num = ref(18);
function fn2() {
  num.value = 88;
  console.log(num);
}
console.log(num);

watch(num, () => {
  console.log("num改变了");
});

// 2.ref绑定复杂数据类型

let obj = ref({
  name: "小米",
  age: 19,
});

console.log(obj);
function fn3() {
  obj.value.name = "小王";
  // obj.value={
  //     name:"张三",
  //     age:17
  // }
}
watch(
  obj,
  () => {
    console.log("obj改变了");
  },
  { deep: true }
);

// 3.ref绑定DOM
let inputRef = ref(null);
// setTimeout(()=>{
//     console.log(inputRef.value.value);
// },2000);

onMounted(() => {
  console.log(inputRef.value.value);
});
</script>

<style scoped></style>
